<template>
  <a-form ref="formRef" layout="vertical" :model="formData">
    <a-space direction="vertical" :size="16">
      <a-card class="general-card">
        <template #title> 表生成配置 </template>
        <a-row :gutter="80">
          <a-col :span="8">
            <a-form-item label="数据源" field="dataSource">
              <a-select placeholder="数据源" v-model='formData.dataSource'>
                <a-option value='local'>本地</a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item
              label="表名称"
              field="tbTableName"
              :rules="[
                {
                  required: true,
                  message: '请选择表名称',
                },
              ]"
            >
              <a-select
                v-model="formData.tbTableName"
                placeholder="请选择表"
                @change="loadPk"
              >
                <a-option
                  v-for="item in tables"
                  :key="item.tableName"
                  :value="item.tableName"
                  >{{ item.tableName }} [{{ item.tableComment }}]</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="请选择主键" field="tbTablePk"   :rules="[
                {
                  required: true,
                  message: '请选择主键',
                },
              ]">
              <a-select v-model="formData.tbTablePk" placeholder="请选择表">
                <a-option
                  v-for="item in tablePks"
                  :key="item.columnName"
                  :value="item.columnName"
                  >{{ item.columnName }} [{{ item.columnComment }}]</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="80">
          <a-col :span="8">
            <a-form-item label="插件名称" field="pluginName" :rules="[
                {
                  required: true,
                  message: '请输入插件名称',
                },
              ]">
              <a-input v-model="formData.pluginName" placeholder="插件名称" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="包名称" field="packageName" :rules="[
                {
                  required: true,
                  message: '请输入包名称',
                },
              ]">
              <a-input v-model="formData.packageName" placeholder="包名称" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="模块名称" field="moduleName" :rules="[
                {
                  required: true,
                  message: '请输入模块名称',
                },
              ]">
              <a-input v-model="formData.moduleName" placeholder="模块名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="80">
          <a-col :span="8">
            <a-form-item label="功能名" field="functionName" :rules="[
                {
                  required: true,
                  message: '请输入功能名',
                },
              ]">
              <a-input v-model="formData.functionName" placeholder="功能名" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="业务名" field="busName" :rules="[
                {
                  required: true,
                  message: '请输入业务名',
                },
              ]">
              <a-input v-model="formData.busName" placeholder="业务名" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="类名称" field="className" :rules="[
                {
                  required: true,
                  message: '请输入类名称',
                },
              ]">
              <a-input v-model="formData.className" placeholder="类名称" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card class="general-card">
        <template #title> 其他配置 </template>

        <a-row :gutter="80">
          <a-col :span="8">
            <a-form-item label="作者" field="author">
              <a-input v-model="formData.author" placeholder="作者" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="布局方式" field="formLayout ">
              <a-select v-model="formData.formLayout" placeholder="布局方式">
                <a-option value="1">垂直</a-option>
                <a-option value="2">水平</a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="去除表前缀" field="tablePrefix">
              <a-input v-model="formData.tablePrefix" placeholder="去除前缀" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="80">
          <a-col :span="8">
            <a-form-item label="生成方式" field="generateType" :rules="[
                {
                  required: true,
                  message: '请选择生成方式',
                },
              ]">
              <a-select v-model="formData.generateType" placeholder="生成方式">
                <a-option value="1">项目内</a-option>
                <a-option value="2">ZIP 打包下载</a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="排序" field="sortCode">
              <a-input-number v-model="formData.sortCode" placeholder="排序" />
            </a-form-item>
          </a-col>

        </a-row>
      </a-card>
    </a-space>
    <div class="actions" style="text-align: center">
      <a-space>
<!--        <a-button @click="reset">  </a-button>-->
        <a-button @click="back">  返回 </a-button>
        <a-button type="primary"  @click="onNextClick">
          下一步
        </a-button>
      </a-space>
    </div>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import {dbTables, dbTableColumns, Tables, Columns, detail} from '@/api/dev';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import {useRouter} from "vue-router";

  const tables = ref<Tables[]>([]);
  const tablePks = ref<Columns[]>([]);
  const router = useRouter();
  const formRef = ref<FormInstance>();
  const row = defineProps(['rowId'])

  const formModel = () => {
    return {
      id: row.rowId,
      tbTableName: '',
      tbTablePk: '',
      pluginName: 'superchart-module-biz',
      moduleName: 'biz',
      tablePrefix: '',
      generateType: '1',
      module: '',
      menuPid: '',
      functionName: '',
      busName: '',
      className: '',
      formLayout: '1',
      gridWhether: '',
      packageName: 'cn.superchart.module',
      author: '',
      dataSource:'local'
    };
  };
  const formData = ref(formModel());
  const initTables = async () => {
    const res = await dbTables('superchart');
    tables.value = res.data;
  };

  const loadPk = async (val: string) => {
    const res = await dbTableColumns('superchart', val);
    tablePks.value = res.data;
  };
  initTables();
  const emits = defineEmits(['changeStep']);
  const detailTables = async () => {
    if(row.rowId){
      const {data} = await detail(row.rowId);
      formData.value= data ;
    }
  };

  const reset = async () => {
    formData.value = formModel();
    await formRef.value?.resetFields();
  };
  const back = () => {
    // router.back()
    router.push({ name: 'onlineHome' })
  }

  detailTables();
  const onNextClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      emits('changeStep', 'submit1', { ...formData.value });
    }
  };
</script>

<style scoped lang="less">
  .container {
    padding: 20px;
    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
  }

  .steps {
    margin-bottom: 36px;
  }

  .form {
    width: 500px;
  }

  .form-content {
    padding: 8px 50px 0 30px;
  }
</style>
